<template>
  <div class="commonTable">
    <!--        modal在solt中会被执行两次-->
    <set-table-header v-if="tableHeaderVisible" ref="tableHeaderModal"
                      @closeTableHeaderModal="closeTableHeaderModal" :this-table-name="thisTableName"
                      :this-table-header-data="thisTableHeaderData"
                      :this-table-header-data-middel="thisTableHeaderDataMiddel"/>
    <a-config-provider :locale="locale">
      <!-- columnTitle:' ', -->
      <a-table
      v-if="tableData && tableData.length"
        :columns="columnsData"
        :data-source="newTableArr"
        :pagination="pagination"
        @change="handleTableChange"
        :row-selection="isRowsSelectVisible ? {
          selectedRowKeys: selectedRowKeys,
          onSelect:onSelect,
          onChange: onSelectChange,
          onSelectAll:onSelectAll,
          getCheckboxProps: getCheckboxProps,
          type: selectType,
          columnWidth: 40,
        } : null"
        :loading="loadVisible"
        :scroll="{ x: scrollx ? scrollX : 'auto', y: scrollY }"
        :rowKey="dataRowKeys"
        :customRow="rowHover"
        :rowClassName="tableRowClass"
        :components="draggerComponents"
        ref="commonTable"
        :expanded-row-keys.sync="expandedRowKeys"
        @expand="onExpand" 
        :expandIconAsCell="false"
        :expandIconColumnIndex="expandIconColumnIndex"
        :expandIcon="iconFun"
      >
      <!-- :expandIcon="iconFun" -->
        <!-- 表头设置按钮 x: 'max-content', , y: 'calc(100vh - 474px)'  y: 'calc(100vh - ' + height + 'px)'  trigger="click" -->
        <span slot="customTitle" class="settingStyle">
          <a-popover>
            <template slot="content">
              <div class="table-header" @click="clearAllFilter"><a-icon type="sync"/>清空筛选</div>
              <div class="table-header" @click="headerConfig"><a-icon type="setting"/>表头设置</div>
            </template>
            <a-button style="border: none;padding: 0;">
              <a-icon type="menu" style="font-size: 20px"/>
            </a-button>
          </a-popover>
        </span>
        <template v-for="item in columns" :slot="item.dataIndex" slot-scope="text,record">
          <a-tooltip placement="topLeft" v-if="item.dataIndex=='number'" :key="item.dataIndex">
            <template slot="title">
              {{ text }}
            </template>
            <a style="display:inline-block" @click="nodeClick(record)">{{ text }}</a>
          </a-tooltip>
          <a-tooltip placement="topLeft" v-else :key="item.dataIndex">
            <template slot="title">
              {{ text }}
            </template>
            <span  class="textOverflower" :style="{width:item.width+'px'}">{{ text }}</span>
          </a-tooltip>
        </template>
        <!-- 筛选 -->
        <template
          slot="filterDropdown"
          slot-scope="{
            setSelectedKeys,
            selectedKeys,
            confirm,
            clearFilters,
            column,
          }"
        >
          <div class="filterItem">
            <div class="topItem">
              <div class="itemTitle">快捷操作</div>
              <ul>
                <li @click="sortData(column, 'upchange')">
                  <a-icon type="bars"/>
                  升序排列
                </li>
                <li @click="sortData(column, 'downchange')">
                  <a-icon type="bars"/>
                  降序排列
                </li>
              </ul>
            </div>

            <div class="botItem">
              <div class="itemTitle">
                <span class="right">筛选条件</span>
                <span class="left"
                      @click="clearSelect([], selectedKeys, confirm, column, setSelectedKeys, clearFilters)">清空</span>
              </div>
              <!-- input搜索框 -->
              <div class="selectItem" v-if="column.fieldType === 'Input' && column.dataType === 'String'">
                <div class="title">{{ column.title }}查询</div>
                <div class="inputContent">
                  <a-input-search
                    placeholder="请输入"
                    v-model="column.InputValue"
                    @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                    @search="() => inputSearch(selectedKeys, confirm, column, setSelectedKeys)"
                    @pressEnter="() => inputSearch(selectedKeys, confirm, column, setSelectedKeys)"
                  />
                </div>
              </div>

              <!-- input搜索框 -->
              <div class="selectItem"
                   v-else-if="column.fieldType === 'Input' && (column.dataType.indexOf('Number') != -1)">
                <div class="title">{{ column.title }}查询</div>
                <div class="inputContent">
                  <a-input-search
                    placeholder="请输入"
                    v-model="column.InputValue"
                    @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                    @search="() => inputSearch(selectedKeys, confirm, column, setSelectedKeys)"
                    @pressEnter="() => inputSearch(selectedKeys, confirm, column, setSelectedKeys)"
                  />
                </div>
              </div>
            </div>
          </div>
        </template>
      </a-table>
      <a-table
        v-else
        :columns="columnsData"
        :data-source="[]"
        :pagination="pagination"
        @change="handleTableChange"
        :row-selection="isRowsSelectVisible ? {
          selectedRowKeys: selectedRowKeys,
          onSelect:onSelect,
          onChange: onSelectChange,
          onSelectAll:onSelectAll,
          getCheckboxProps: getCheckboxProps,
          type: selectType,
          columnWidth: 40,
        } : null"
        :loading="loadVisible"
        :scroll="{ x: scrollx ? scrollX : 'auto', y: scrollY }"
        :rowKey="dataRowKeys"
        :customRow="rowHover"
        :rowClassName="tableRowClass"
        :components="draggerComponents"
        ref="commonTable"
        :expanded-row-keys.sync="expandedRowKeys"
        @expand="onExpand" 
        :expandIconAsCell="false"
        :expandIconColumnIndex="3"
      >
      </a-table>
    </a-config-provider>
  </div>
</template>
<script>
import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
import setTableHeader from '@/components/setTableHeader/index';
import _ from "lodash";
import { draggerTable } from '@/mixins/draggerTable'

export default {
  name: "commonTableTree",
  mixins: [draggerTable],
  data() {
    return {
      components: null,
      locale: zhCN,
      selectedRowKeys: [],
      expandedRowKeys: [],
      selectData: [], // 表头下拉框数据
      tableHeaderVisible: false,
      filterArr: [], // 选中的过滤数组
      newTableArr: this.tableData, // 新数组渲染
      showEye: {},
      scrollX: this.scrollx,
      isClickContextmenu: false,
      // filteredInfo: null, // 过滤条件
      // selectValueObj: {},
      filteredInfo: this.filterData.filteredInfo, // 过滤条件
      selectValueObj: this.filterData.selectValueObj || {},
      dropdownVisible: false, // 筛选下拉框显示隐藏
      isClick:false,//全选是否被点击
      isExpanded:false,
    };
  },
  components: {
    setTableHeader,
  },
  /*'thisTableName---当前表格名称','thisTableHeaderData--当前表格所有表头数据','thisTableHeaderDataMiddel--当前表格存在中台的表头数据'*/
  props: {
    expandIconColumnIndex: {
      type: Number,
      default: 1
    },
    renderLength: {
      type: Number,
      default: 5
    },
    columns: {
      /*表格列头数据*/
      type: Array,
      default: () => {
        return []
      }
    },
    tableData: {
      /*表格数据*/
      type: Array,
      default: () => {
        return []
      }
    },
    isDisable:{
      type:String,
      default:'0'
    },
    selectType: {
      /*多选类型，单选或者多选*/
      type: String,
      default: 'checkbox'
    },
    loadVisible: {
      /*loading显示隐藏*/
      type: Boolean,
      default: false
    },
    isRowsSelectVisible: {
      /*首列选项显示隐藏*/
      type: Boolean,
      default: false
    },
    thisTableName: {
      type: String,
      default: '执行任务',
      // required: true
    },
    thisTableHeaderData: {
      type: Array,
      default: () => []
    },
    thisTableHeaderDataMiddel: {
      type: Array,
      default: () => []
    },
    /* 已关注数据 */
    hasAttention: {
      type: Array,
      default: () => []
    },
    dataRowKey: {
      type: String,
      default: ''
    },//rowkey
    height: {
      type: Number,
      default: 474
    },
    // 是否设置点击行选中
    clickRowSelect: {
      type: Boolean,
      default: false
    },
    // 是否设置点击行高亮
    clickRowHighlight: {
      type: Boolean,
      default: true
    },
    // 是否设置行颜色
    setRowColor: {
      type: Boolean,
      default: false
    },
    scrollY: {
      type: String,
      default: 'calc(100vh - 360px)'
    },
    scrollx: {
      type: String | Boolean,
      default: '4000'
    },
    filterData: {
      type: Object,
      default: function () {
        return {}
      }
    },
    /*是否显示分页*/
    isPagination: {
      type: Boolean,
      default: true
    },
    // 是否允许拖拽排序
    isDragSort: {
      type: Boolean,
      default: false
    },
    delSelectRow: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    columnsData() {
      // console.log(this.columns)
      if (this.columns.length > 0) {
        let filteredInfo = this.filteredInfo || {}
        this.columns.forEach((item) => {
          if (item.dataIndex !== 'setting') {
            item.title = item.displayName;
            item.dataIndex = item.name
            item.align = "left";
            // item.ellipsis = true;
            item.selectValue = this.selectValueObj[item.title] || []
            item.InputValue = this.selectValueObj[item.title] || ''
            item.DateValue = this.selectValueObj[item.title] || []
            item.filteredValue = filteredInfo[item.name] || null
            // this.$set(item, "selectValue", []);
            this.$set(item, 'width', typeof item.width === 'number' && item.width ? item.width : 120)
            if (!item.scopedSlots) {
              item.scopedSlots = {
                customRender: "tooltips"
              };
            }
          }
          // Input Select Date
          // console.log(item.fieldType, item.dataType)
          if (item.fieldType === 'Select') {
            item.onFilter = (value, record) => {
              return record[item.dataIndex] && record[item.dataIndex].includes(value);
            }

            /**获取表头中下拉框数据 */
            item.onFilterDropdownVisibleChange = (visible) => {
              if (visible) {
                this.selectData = item.fieldValue;
              } else {
                this.dropdownVisible = false
              }
            };

          } else if (item.fieldType === 'Input') {
            item.onFilter = (value, record) => {
              return record[item.dataIndex] && record[item.dataIndex].includes(value);
            }
          } else if (item.fieldType === 'Date' || item.fieldType === 'Date_Time') {
            let count = 1
            let startTimeStr = ''
            item.onFilter = (value, record) => {
              if (count % 2 === 0) {
                let startTime = new Date(startTimeStr).getTime()
                let endTime = new Date(value).getTime()
                let nowTime = new Date(record[item.dataIndex]).getTime()
                return nowTime >= startTime && nowTime <= endTime
              } else {
                startTimeStr = value
              }
              count++
            }
          }
          // 健康状态 下拉框筛选英文改为中文 只设置一次 第二次不再设置
          if (item.name === "healthstatus" && !item.fieldValue[0].name) {
            const colorData = {
              'RED': '红',
              'UNAVAILABLE': '灰',
              'YELLOW': '黄',
              'GREEN': '绿'
            }
            let colorKyeData = []
            item.fieldValue.forEach(color => {
              colorKyeData.push({
                name: color,
                value: colorData[color]
              })
            })
            item.fieldValue = colorKyeData
          }
          // 健康状态 下拉框筛选英文改为中文
        })
        // .map(item => item.name)
        // console.log(this.columns)
        this.$emit('filterTable', {
          selectValueObj: this.selectValueObj,
          filteredInfo
        })
        return this.columns;
      }
    },
    pagination() {
      if (this.isPagination) {
        let obj =  {
          page: 1, // 页码
          // current: 1, // 当前页数
          total: 0, // 总数
          pageSize: 10, //每页中显示几条数据
          pageSizeOptions: ["10", "20", "30"],
          showSizeChanger: true,
          showQuickJumper: true,
          showLessItems: true,
          showTotal: (total) => `共${total}条`, //分页中显示总的数据
        }
        return obj
      } else {
        return false
      }
    },
  },
  watch: {
    tableData(val, oldVal) {
      this.newTableArr = val
      // // this.pagination.total = val.length
      // this.defaultExpandedRowKeys = ["GHS000985"]
      // this.onExpand(true,val[0])
      this.fnAllExpandNew(val)
    },
    hasAttention(val, oldVal) {
      this.hasAttention = val
    },
    filterData: {
      handler(val) {
        this.filteredInfo = val.filteredInfo || {} // 过滤条件
        this.selectValueObj = val.selectValueObj || {}
      },
      deep: true
    },
    delSelectRow:{
      handler(val){
        if(val && val.length){
          val.map(item=>{
            this.selectedRowKeys.splice(this.selectedRowKeys.splice(item1=>item1==item),1)
          })
        }
      }
    }
  },

  mounted() {
    document.body.addEventListener('click', (e) => {
      if (this.isClickContextmenu) {
        this.selectedRowKeys = []
        let fileSingleData = JSON.parse(sessionStorage.getItem('fileSingle'))
        this.$emit("routerContextmenu", false, null, fileSingleData.tableArr);
        this.isClickContextmenu = false
      }
    })
    // this.columnsData = this.columns
    // this.newTableArr = this.tableData
    if (this.newTableArr.length) {
      this.setScrollX()
    }
  },
  updated() {
    if (this.newTableArr.length || this.columns.length) {
      this.setScrollX()
    }
  },
  methods: {
    toDetail(data) {
      this.$emit("toBookDetail",data)
      // if()
      // this.$route
    },
    nodeClick(val){
      this.$emit('expandClicks',val)
    },
    onExpand (expanded, record) {
      record.expanded = record.leaf ? false : !record.expanded
      this.$emit('expandClick',expanded,record)
      // if (expanded) {
      //   // 设置展开窗Key，代表展开操作
      //   this.expandedRowKeys.push(record.number)
      // } else {
      //   // 代表折叠操作
      //   if (this.expandedRowKeys.length) {
      //     this.expandedRowKeys = this.expandedRowKeys.filter(v => {
      //       return v !== record.number
      //     })
      //   }
      // }
    },
    iconFun(props){
      if(props.record.expanded){
        return(
          <a-icon type="minus-square" style="color:'#e6e5e5';cursor: pointer;vertical-align: middle;margin-top:-12px;margin-right:4px;"
            onClick={(e) => {
              props.onExpand(props.record, e);
            }}
          ></a-icon>
        )
      }else{
        if(props.record.leaf){
          return (
            <a-icon type="file" style="color:'#e6e5e5';cursor: pointer;vertical-align: middle;margin-top:-12px;margin-right:4px;"
              onClick={(e) => {
                props.onExpand(props.record, e);
              }}
            >
            </a-icon>
          );
        }else{
          return (
            <a-icon type="plus-square" style="color:'#e6e5e5';cursor: pointer;vertical-align: middle;margin-top:-12px;margin-right:4px;"
              onClick={(e) => {
                props.onExpand(props.record, e);
              }}
            >
            </a-icon>
          );
        }
      }
    },
    /*默认展开所有*/
    fnAllExpand(val){
      val.forEach((value)=>{
        this.expandedRowKeys.push(value.number)
        this.handData(value, true)
      })
    },
	handData(val, status) {
      if (val.children && val.children.length > 0) {
        val.children.forEach((item, index) => {
          this.expandedRowKeys.push(item.number)
          this.expandedRowKeys.push(this.dataRowKey ? item[this.dataRowKey] : item.oid)
          this.handData(item)
        })
      }
    },
    fnAllExpandNew(data) {
      const _this = this
      this.expandedRowKeys = []
      data.forEach((val, k)=>{
        if(k <= this.renderLength) {
          this.expandedRowKeys.push(val.number)
          this.expandedRowKeys.push(this.dataRowKey ? val[this.dataRowKey] : val.oid)
          this.handData(val, true)
        } 
        // else if( k < 6){
        //   setTimeout(function() {
        //      _this.expandedRowKeys.push(val.oid)
        //      _this.expandedRowKeys.push(val.number)
        //      _this.handData(val, true)
        //   },100) 
        // }
         else if( k < this.renderLength + 3){
          setTimeout(function() {
             _this.expandedRowKeys.push(val.number)
             _this.expandedRowKeys.push(val.oid)
             _this.handData(val, true)
          },200) 
        }
      })
    },
    dataRowKeys(record) {
      return record[this.dataRowKey]
    },
    setScrollX() {
      this.$nextTick(() => {
        if (!this.scrollx) return
        let len = this.columns.length
        if (len <= 5) {
          this.scrollX = 850
        } else if (len <= 10) {
          this.scrollX = 1590
        } else if (len <= 15) {
          this.scrollX = 2550
        } else if (len <= 20) {
          this.scrollX = 3400
        } else if (len <= 25) {
          this.scrollX = 4250
        } else if (len <= 30) {
          this.scrollX = 5100
        } else if (len <= 35) {
          this.scrollX = 5950
        } else if (len <= 40) {
          this.scrollX = 6800
        } else {
          this.scrollX = 7650
        }
        // console.log(len, this.scrollX)
      })
    },
    clearAllFilter() {
      if (this.filteredInfo) {
        this.$message.success('清除成功')
      }
      this.$set(this, 'filteredInfo', null)
      this.$set(this, 'selectValueObj', {})
    },
    // 分页
    handleTableChange(pagination, filters) {
      this.pagination.page = pagination.page;
      this.$set(this, 'filteredInfo', filters)
    },
    headerConfig() {//开启表头设置弹框
      this.tableHeaderVisible = true
      // this.$refs.tableHeaderModal.init()//默认加载设置表头modal中的数据
    },
    closeTableHeaderModal() {//关闭表头设置弹框
      this.tableHeaderVisible = false
    },
    onSelect(record,selected,selectRow,nativeEvent){
      this.isClick = false;
      this.$emit('onselectChange', selected,record)
    },
    //全选
    onSelectAll(selected){
      this.isClick = true;
      this.$emit('onSelectAll', selected)
    },
    // 多选
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.$emit('selectedRows', selectedRows)
      this.$store.commit('getSelectedTableData', selectedRows)//将选中的表格数据存入vuex中
    },
    getCheckboxProps(record) {
      let ableds = record.newNumber ? true : false;
      if(this.isClick){
        return({
          props:{
            disabled:false,
          }
        })
      }else{
        return({
          props:{
            defaultChecked: ableds,
            disabled:false,
          }
        })
      }
      
      
      // if (this.hasAttention.indexOf(record.oid) !== -1) {
      //   ableds = true
      //   return ({
      //     props: {
      //       disabled: ableds
      //     },
      //   });
      // } else {
      //   return ({
      //     props: {
      //       disabled: record['disaabledchecked'] == true, // Column configuration not to be checked
      //       name: record['assignment.plannableStatus'],
      //     },
      //   });
      // }
    },
    handleBlur(value, selectedKeys, confirm, column, setSelectedKeys) {
      // console.log(value, selectedKeys)
      if (setSelectedKeys) {
        setSelectedKeys(value)
      }
      this.setFilterInfo(column, value)
      this.dropdownVisible = false
      confirm()
    },
    // 多选状态下，点击标签X时回调
    handleDeselect(value, selectedKeys, confirm, column, setSelectedKeys) {
      selectedKeys = selectedKeys.filter(item => item !== value)
      this.setFilterInfo(column, selectedKeys)
      setSelectedKeys(selectedKeys)
      confirm()
    },
    // 表头下拉框选择
    handleSelect(value, selectedKeys, confirm, column, setSelectedKeys) {
      if (column.fieldType === 'Input') {
        this.$set(this.selectValueObj, column.title, value[0])
      } else {
        this.$set(this.selectValueObj, column.title, value)
      }
      if (setSelectedKeys) {
        setSelectedKeys(value)
      }
      confirm();
    },

    // 清除
    clearSelect(value, selectedKeys, confirm, column, setSelectedKeys, clearFilters) {
      // console.log(this.columnsData);
      this.$set(column, "selectValue", []);
      this.$set(column, "InputValue", '');
      this.$set(column, "DateValue", []);
      // console.log(this.filterArr)
      this.handleSelect(value, selectedKeys, confirm, column, setSelectedKeys)
      clearFilters()
    },

    // 时间框查询
    timeSelect(date, selectedKeys, confirm, column, setSelectedKeys) {
      let timeArr = []
      if (date.length > 0) {
        timeArr = [date[0].format('YYYY-MM-DD'), date[1].format('YYYY-MM-DD')]
      } else {
        timeArr = []
      }
      this.handleSelect(timeArr, null, confirm, column, setSelectedKeys)
      // value, selectedKeys, confirm, column, setSelectedKeys
    },

    // 搜索框查询
    inputSearch(selectedKeys, confirm, column, setSelectedKeys) {
      this.handleSelect(selectedKeys, null, confirm, column)
      // value, selectedKeys, confirm, column, setSelectedKeys
    },

    // 升序&降序
    sortData(col, sortType) {
      if (col.dataType === 'String') {
        this.textSort(this.newTableArr, col.name, sortType)
      } else if (col.dataType === 'Date') {
        this.timeSort(this.newTableArr, col.name, sortType)
      } else if (col.dataType.indexOf('Number') != -1) {
        this.numSort(this.newTableArr, col.name, sortType)
      }
    },

    // 数值排序
    numSort(arr, property, sortType) {
      let aInfo = a[property] ? a[property] : 0
      let bInfo = b[property] ? b[property] : 0
      arr.sort(function (a, b) {
        if (sortType === 'upchange') {
          return aInfo - bInfo
        } else {
          return bInfo - aInfo
        }
      })
    },

    // 中文排序
    textSort(arr, property, sortType) {
      arr.sort(function (a, b) {
        let aInfo = a[property] ? a[property] : ''
        let bInfo = b[property] ? b[property] : ''
        if (sortType === 'upchange') {
          return aInfo.localeCompare(bInfo, 'zh')
        } else {
          return bInfo.localeCompare(aInfo, 'zh')
        }
      })
    },

    // 时间排序
    timeSort(arr, property, sortType) {
      
      arr.sort(function (a, b) {
        let aInfo = a[property] ? a[property] : ''
        let bInfo = b[property] ? b[property] : ''
        if (sortType === 'upchange') {
          return aInfo > bInfo ? 1 : -1
        } else {
          return aInfo < bInfo ? 1 : -1
        }
      })
    },
    routerPageGroup(val) {
      this.$emit("routerPageGroup", val);
    },
    // 跳转当项目首页
    routerPage(val) {
      this.$emit("routerPage", val);
    },
    //主题跳转
    routerPageThem(val) {
      this.$emit("routerPageThem", val);
    },
    // 跳转项目首页
    routerToProject(val) {
      this.$emit("routerToProject", val);
    },
    //交付物跳转
    routerDeliverable(val) {
      this.$emit("routerDeliverable", val);
    },
    //操作跳转
    routerActionPage(val) {
      this.$emit("routerActionPage", val);
    },
    //行移入显示小眼睛
    rowHover(record, index) {
      const _this = this
      return {
        style: {
          cursor: this.isDragSort ? 'pointer' : 'default'
        },
        on: {
          // 鼠标移入
          mouseenter: (event) => {
            this.showEye = record
            if (!this.isDragSort) return
            // 兼容IE
            var ev = event || window.event
            ev.target.draggable = true
          },
          // 开始拖拽
          dragstart: (event) => {
            if (!this.isDragSort) return
            // 兼容IE
            var ev = event || window.event
            // 阻止冒泡
            ev.stopPropagation()
            // 得到源目标数据
            this.sourceIndex = index
          },
          // 拖动元素经过的元素
          dragover: (event) => {
            if (!this.isDragSort) return
            // 兼容 IE
            var ev = event || window.event
            // 阻止默认行为
            ev.preventDefault()
          },
          // 鼠标松开
          drop: (event) => {
            if (!this.isDragSort) return
            // 兼容IE
            var ev = event || window.event
            // 阻止冒泡
            ev.stopPropagation()
            // 得到目标数据
            this.targetIndex = index
            if (this.isDragSort) {
              let d = this.tableData.splice(this.sourceIndex, 1)
              this.tableData.splice(this.targetIndex, 0, ...d)
            }
          },
          // mouseenter: (event) => {
          //   // this.showEye[index] = true
          //   // this.showEye = _.clone(this.showEye)
          //   this.showEye = record
          // },  // 鼠标移入行
          mouseleave: (event) => {
            // this.showEye[index] = false
            // this.showEye = _.clone(this.showEye)
            this.showEye = {}
          },
          contextmenu(event) {
            event.preventDefault()
            _this.isClickContextmenu = true
            _this.selectedRowKeys = [index]
            _this.$emit("routerContextmenu", true, event, [record]);
          },
          click: (event) => {
            if (this.clickRowSelect) {
              this.selectedRowKeys = [record.oid]
              // 行点击
              this.$emit('clickRow', [record])
            }
            // if (this.clickRowHighlight) {
            //   // console.log(record, event.target.parentElement.style.background = '#f0f7ff')
            //   if(event.target.parentNode  === null) return false;
            //   let allTr = event.target.parentNode.parentNode.children;
            //   Array.prototype.forEach.call(allTr, function (dom, i) {
            //       dom.classList.remove("current");
            //   });
            //   event.target.parentNode.classList.add("current");
            // }
          }
        },
      };
    },
    tableRowClass(record, index) {
      if (this.setRowColor && record.healthStatus) {
        return record.healthStatus
      }
    }
  },
};
</script>

<style lang="less" scoped>
.commonTable {
  position: relative;
  .textOverflower{
    display:inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
  }
  /deep/ .ant-table-tbody > tr > td{
    padding: 0;
    height: 40px;
    padding-left: 10px;
  }
  /deep/.ant-table-thead > tr > th{
    padding: 12px 16px !important;
  }
  /deep/ .ant-table-column-title {
    .settingStyle {
      cursor: pointer;
      :hover {
        color: #386bd7;
      }
      .ant-btn {
        width: auto;
        background: #f6f7f8;
      }
    }
  }

  .settingStyle {
    // position: absolute;
    // top: -46px;
    // right: 0;
    &:hover {
      color: #386bd7;
    }
    .ant-btn{
      background: transparent;
    }
  }

  // 动态设置行字体颜色
  /deep/ .ant-table-tbody {
    tr.UNAVAILABLE {
      color: #999999;
    }

    tr.GREEN {
      color: #3dbd7d;
    }

    tr.YELLOW {
      color: #f68800;
    }

    tr.RED {
      color: #f04134;
    }

    tr:hover > td {
      background: #f0f7ff !important;
    }
    // 点击高亮
    tr.current > td {
      background: #f0f7ff;
    }
  }

  // 动态设置行字体颜色

  /deep/ .ant-table-tbody > tr > td {
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    a {
      display: block;
    }
  }

  /deep/ .ant-table-tbody > tr > td {
    word-wrap: break-word;
    word-break: break-all;

    > span > div, a {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  /deep/ .ant-table-fixed-right tr {
    justify-content: center;

    // th {
    //   border: none;
    // }

  }


  /deep/ .ant-table-body {
    //样式穿透
    overflow-x: auto !important;

    // .ant-table-row {
    //   td {
    //     padding: 12px 16px;
    //   }
    // }
  }
  /deep/ .ant-table-thead > tr > th {
    border-right: 1px solid #eee;
  }
  /deep/ .ant-table-thead > tr > th .anticon-filter,
  .ant-table-thead > tr > th .ant-table-filter-icon {
    margin-left: 5px;
    width: 1vw;
    right: auto;
  }
  /deep/ .ant-table-fixed-right {
    box-shadow: none;

    .ant-table-row-cell-break-word {
      padding: 0px;
      text-align: center;
      background: none;
    }

    .ant-table-thead {
      background: #fafafa;
    }

    // .ant-table-tbody > tr > td {
    //   border-bottom: none;
    // }
  }

  .table-wrapper {
    .settingStyle {
      float: right;
    }
  }
}

.filterItem {
  width: 260px;
  padding: 12px 0px;
  text-align: left;

  .topItem {
    border-bottom: 1px solid #eee;
    padding: 0px 12px;

    .itemTitle {
      color: #999999;
      font-size: 14px;
      margin: 6px 0px;
    }

    ul {
      li {
        color: #333333;
        font-size: 14px;
        margin: 6px 0px;
        cursor: pointer;
      }
    }

    ul li:hover {
      color: #386bd7;
    }
  }

  .botItem {
    padding: 0px 12px;

    .itemTitle {
      margin: 6px 0px;
      display: flex;
      justify-content: space-between;

      .right {
        font-size: 14px;
        color: #999999;
      }

      .left {
        font-size: 12px;
        color: #386bd7;
        cursor: pointer;
      }
    }

    .selectItem {
      .title {
        color: #333333;
        font-size: 14px;
        margin: 4px 0px;
      }
    }
  }
}

.deliverable_div {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .taskNum_task {
    min-width: 18px;
    height: 18px;
    border-radius: 100px;
    background-color: #c0c0c0;
    margin-right: 5px;
    padding: 0px 3px 0px 3px;
    text-align: center;
    line-height: 18px;
    color: #ffffff;
    font-size: 12px;
  }
}

.table-header{
  cursor: pointer;
  min-width: 78px;
  &:nth-of-type(1) {
    margin-bottom: 8px;
  }
  &:hover{
    color: #386bd7;
  }
  .anticon{
    font-size: 14px;
    margin-right: 8px;
  }
}
.number{
  cursor: pointer;
  color: #386bd7
}
.group{
  font-weight: bold;
  color: #ffa400
}
.institute{
  font-weight: 600;
  color: #96ce54
}
.produce{
  color: #88ada6;
  font-weight: 500;
}
</style>